<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <title>购物车 - 美食外卖平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --primary: #FF6B6B;
      --secondary: #FFE8E8;
      --text: #333;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
      --radius-lg: 20px;
      --radius-md: 12px;
      --transition: all 0.3s ease;
      --content-max-width: 1200px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', system-ui;
    }

    body {
      background: #F8F9FA;
      color: var(--text);
      padding-bottom: 160px;
    }

    /* 登录蒙层 */
    .login-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.95);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      backdrop-filter: blur(5px);
    }

    .login-prompt {
      text-align: center;
      padding: 40px;
      background: white;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      max-width: 400px;
      margin: 20px;
    }

    .login-prompt h2 {
      margin-bottom: 20px;
      color: var(--primary);
    }

    .login-btn {
      background: var(--primary);
      color: white;
      padding: 12px 40px;
      border-radius: 30px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
      display: inline-block;
      margin-top: 20px;
    }

    /* 头部样式 */
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      background: white;
      padding: 12px 0;
      box-shadow: var(--shadow-sm);
      z-index: 1000;
      display: flex;
      justify-content: center;
    }

    .header-content {
      width: 100%;
      max-width: var(--content-max-width);
      padding: 0 20px;
    }

    .page-title {
      font-size: 24px;
      color: var(--primary);
      padding: 10px 0;
    }

    /* 批量操作栏 */
    .batch-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background: white;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      margin-bottom: 15px;
    }

    .batch-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .batch-checkbox input {
      width: 16px;
      height: 16px;
    }

    .batch-delete-btn {
      background: #ffebee;
      color: #f44336;
      padding: 8px 15px;
      border-radius: var(--radius-md);
      border: none;
      font-size: 14px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .batch-delete-btn:hover {
      background: #f44336;
      color: white;
    }

    /* 购物车内容 */
    .cart-container {
      padding: 90px 0 30px;
      max-width: var(--content-max-width);
      margin: 0 auto;
    }

    .cart-items {
      padding: 0 20px;
    }

    /* 商品卡片 */
    .cart-item {
      background: white;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
      padding: 20px;
      display: grid;
      grid-template-columns: auto 100px 1fr auto;
      gap: 20px;
      align-items: center;
      transition: var(--transition);
    }

    .cart-item:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    /* 商品选择框 */
    .item-select {
      display: flex;
      align-items: center;
      padding-right: 10px;
    }

    .item-select input {
      width: 16px;
      height: 16px;
    }

    .item-image {
      width: 100px;
      height: 100px;
      border-radius: var(--radius-md);
      object-fit: cover;
      border: 2px solid var(--secondary);
    }

    .item-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .item-name {
      font-size: 18px;
      font-weight: 600;
    }

    .item-price {
      color: var(--primary);
      font-weight: 800;
      font-size: 16px;
    }

    /* 数量控制器 */
    .quantity-control {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .qty-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--secondary);
      border: none;
      color: var(--primary);
      font-size: 18px;
      cursor: pointer;
      transition: var(--transition);
    }

    .qty-btn:hover {
      background: var(--primary);
      color: white;
    }

    .quantity {
      font-size: 16px;
      min-width: 30px;
      text-align: center;
    }

    /* 结算栏 */
    .checkout-bar {
      position: fixed;
      bottom: 80px;
      width: 100%;
      background: white;
      padding: 20px;
      box-shadow: var(--shadow-sm);
    }

    .checkout-content {
      max-width: var(--content-max-width);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .total-price {
      font-size: 20px;
      color: var(--primary);
      font-weight: 800;
    }

    .checkout-btn {
      background: var(--primary);
      color: white;
      padding: 12px 40px;
      border-radius: 30px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      transition: var(--transition);
    }

    .checkout-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }

    /* 优惠券 */
    .coupon-section {
      padding: 20px;
      max-width: var(--content-max-width);
      margin: 0 auto;
    }

    .coupon-input {
      display: flex;
      gap: 10px;
      max-width: 400px;
    }

    .coupon-input input {
      flex: 1;
      padding: 12px 20px;
      border: 2px solid var(--primary);
      border-radius: 30px;
      font-size: 14px;
    }

    .apply-btn {
      background: var(--primary);
      color: white;
      padding: 12px 25px;
      border-radius: 30px;
      border: none;
      cursor: pointer;
    }

    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 1001;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: #666;
      transition: var(--transition);
      text-decoration: none;
      font-size: 12px;
      padding: 8px;
      border-radius: 12px;
    }

    .nav-item i {
      font-size: 20px;
    }

    .nav-item.active {
      color: var(--primary);
      background: var(--secondary);
    }

    @media (max-width: 768px) {
      .cart-item {
        grid-template-columns: auto 1fr !important;
        text-align: left !important;
        gap: 15px !important;
      }

      .item-select {
        grid-row: 1 / span 2;
        align-self: center;
      }

      .item-image {
        grid-row: 1 / span 2;
      }

      .checkout-content {
        flex-direction: column;
        gap: 15px;
      }

      .bottom-nav {
        padding: 8px 0;
      }

      .nav-item {
        font-size: 11px;
        padding: 6px;
      }

      .nav-item i {
        font-size: 18px;
      }
    }

    @media (max-width: 480px) {
      .checkout-bar {
        bottom: 60px;
      }

      .item-image {
        width: 80px;
        height: 80px;
      }
    }
  </style>
</head>
<body>
<!-- 登录蒙层 -->
<div class="login-mask" id="loginMask">
  <div class="login-prompt">
    <h2>请先登录</h2>
    <p>登录后查看购物车内容</p>
    <a href="It'smine.html" class="login-btn">立即登录</a>
  </div>
</div>

<!-- 页面内容 -->
<header class="header">
  <div class="header-content">
    <h1 class="page-title">🛒 我的购物车</h1>
  </div>
</header>

<main class="cart-container">
  <!-- 批量操作栏 -->
  <div class="batch-actions">
    <label class="batch-checkbox">
      <input type="checkbox" id="selectAll"> 全选
    </label>
    <button class="batch-delete-btn" id="batchDeleteBtn">
      <i class="fas fa-trash-alt"></i> 删除选中
    </button>
  </div>

  <div class="cart-items">
    <article class="cart-item">
      <div class="item-select">
        <input type="checkbox" class="item-checkbox">
      </div>
      <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9"
           class="item-image"
           alt="麻辣香锅">
      <div class="item-info">
        <h3 class="item-name">招牌麻辣香锅</h3>
        <p class="item-price">¥38</p>
        <div class="rating">
          <i class="fas fa-star"></i>4.8
        </div>
      </div>
      <div class="quantity-control">
        <button class="qty-btn minus">-</button>
        <span class="quantity">1</span>
        <button class="qty-btn plus">+</button>
      </div>
    </article>

    <article class="cart-item">
      <div class="item-select">
        <input type="checkbox" class="item-checkbox">
      </div>
      <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9"
           class="item-image"
           alt="寿司拼盘">
      <div class="item-info">
        <h3 class="item-name">寿司盛宴</h3>
        <p class="item-price">¥68</p>
        <div class="rating">
          <i class="fas fa-star"></i>4.9
        </div>
      </div>
      <div class="quantity-control">
        <button class="qty-btn minus">-</button>
        <span class="quantity">2</span>
        <button class="qty-btn plus">+</button>
      </div>
    </article>
  </div>

  <section class="coupon-section">
    <div class="coupon-input">
      <input type="text" placeholder="输入优惠码">
      <button class="apply-btn">立即使用</button>
    </div>
  </section>
</main>

<div class="checkout-bar">
  <div class="checkout-content">
    <div class="total-price">
      总计：<span id="totalPrice">¥168</span>
    </div>
    <button class="checkout-btn" id="checkoutBtn">去结算 (2件)</button>
  </div>
</div>

<nav class="bottom-nav">
  <a href="ShoppingCentre.html" class="nav-item">
    <i class="fas fa-home"></i>
    <span>首页</span>
  </a>
  <a href="Found.html" class="nav-item">
    <i class="fas fa-search"></i>
    <span>发现</span>
  </a>
  <a href="#" class="nav-item active">
    <i class="fas fa-shopping-cart"></i>
    <span>购物车</span>
  </a>
  <a href="It'smine.html" class="nav-item">
    <i class="fas fa-user"></i>
    <span>我的</span>
  </a>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // JWT验证
    const token = sessionStorage.getItem('token');
    const loginMask = document.getElementById('loginMask');

    if (!token) {
      loginMask.style.display = 'flex';
    } else {
      loginMask.style.display = 'none';
    }

    // 数量控制
    document.querySelectorAll('.qty-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const isPlus = e.target.classList.contains('plus');
        const quantitySpan = e.target.parentElement.querySelector('.quantity');
        let qty = parseInt(quantitySpan.textContent);

        qty = isPlus ? qty + 1 : Math.max(1, qty - 1);
        quantitySpan.textContent = qty;
        updateTotal();
      });
    });

    // 更新总价
    function updateTotal() {
      let total = 0;
      let totalItems = 0;

      document.querySelectorAll('.cart-item').forEach(item => {
        const price = parseFloat(item.querySelector('.item-price').textContent.replace('¥', ''));
        const qty = parseInt(item.querySelector('.quantity').textContent);
        total += price * qty;
        totalItems += qty;
      });

      document.getElementById('totalPrice').textContent = `¥${total.toFixed(0)}`;
      document.getElementById('checkoutBtn').textContent = `去结算 (${totalItems}件)`;
    }

    // 全选/取消全选
    const selectAll = document.getElementById('selectAll');
    selectAll.addEventListener('change', () => {
      const checkboxes = document.querySelectorAll('.item-checkbox');
      checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
      });
    });

    // 单个商品选择时检查全选状态
    document.querySelectorAll('.item-checkbox').forEach(checkbox => {
      checkbox.addEventListener('change', () => {
        const allChecked = document.querySelectorAll('.item-checkbox:checked').length ===
          document.querySelectorAll('.item-checkbox').length;
        selectAll.checked = allChecked;
      });
    });

    // 批量删除功能
    const batchDeleteBtn = document.getElementById('batchDeleteBtn');
    batchDeleteBtn.addEventListener('click', () => {
      const selectedItems = document.querySelectorAll('.item-checkbox:checked');

      if (selectedItems.length === 0) {
        alert('请先选择要删除的商品');
        return;
      }

      if (confirm(`确定要删除选中的 ${selectedItems.length} 件商品吗？`)) {
        selectedItems.forEach(checkbox => {
          checkbox.closest('.cart-item').remove();
        });
        updateTotal();
        selectAll.checked = false;
      }
    });

    // 初始化总价
    updateTotal();
  });
</script>
</body>
</html>
